<template>
	<view class="reg">
		<view class="t2">
			<view>
				<view><text>*</text>请选择账号类型</view>
				<view class="t3" @click="show=true"> <input   disabled type="text" v-model="typeName" placeholder="请选择账号类型"
						:placeholder-style='placeholderStyle' maxlength="20">
					<image :src="imgUrl+'0.png'" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view class="t1" v-if="dataForm.userType !=4">
			<view @click="dataForm.userType=1"> 
				<image :src="dataForm.userType==1?imgUrl+'10.png':imgUrl+'9.png'" mode="aspectFill"></image>企业
			</view>
			<view @click="dataForm.userType=2">
				<image :src="dataForm.userType==2?imgUrl+'10.png':imgUrl+'9.png'" mode="aspectFill"></image>个人
			</view>
			<view @click="dataForm.userType=3">
				<image :src="dataForm.userType==3?imgUrl+'10.png':imgUrl+'9.png'" mode="aspectFill"></image>社区
			</view>
		</view>

		<view class="t2" v-if="dataForm.userType==1">

			<view>
				<view><text>*</text>登录账号(账号长度6-20位,支持数字和字母）</view>
				<view class="t3"> <input   type="text" v-model="dataForm.username" placeholder="请输入登录账号"
						:placeholder-style='placeholderStyle' maxlength="20"></view>
			</view>
			<view>
				<view><text>*</text>登录密码(长度6-20位,包含大小写字母、数字）</view>
				<view class="t3"> <input   type="password" v-model="dataForm.password" placeholder="请输入登录密码"
						:placeholder-style='placeholderStyle' maxlength="20"></view>
			</view>
			<view>
				<view><text>*</text>停车场管理责任单位名称</view>
				<view class="t3"> <input   type="text" v-model="dataForm.unitName" placeholder="请输入停车场管理单位名称"
						:placeholder-style='placeholderStyle'>
				</view>
			</view>
			<view>
				<view><text>*</text>统一社会信用代码</view>
				<view class="t3"> <input   type="text" v-model="dataForm.socialCreditCode" placeholder="请输入统一社会信用代码"
						:placeholder-style='placeholderStyle'>
				</view>
			</view>
			<view>
				<view><text>*</text>法定代表人</view>
				<view class="t3"> <input   type="text" v-model="dataForm.legalRepresentative" placeholder="请输入法定代表人"
						:placeholder-style='placeholderStyle'>
				</view>
			</view>
			<view>
				<view><text>*</text>姓名</view>
				<view class="t3"> <input   type="text" v-model="dataForm.name" placeholder="请输入姓名"
						:placeholder-style='placeholderStyle'>
				</view>
			</view>
			<!-- <view>
				<view><text>*</text>联系人</view>
				<view class="t3"> <input   type="text" v-model="dataForm.contact" placeholder="请输入联系人"
						:placeholder-style='placeholderStyle'>
				</view>
			</view> -->
			<view>
				<view><text>*</text>联系电话</view>
				<view class="t3"> <input   type="number" v-model="dataForm.mobile" placeholder="请输入联系电话"
						:placeholder-style='placeholderStyle'>
				</view>
			</view>
			<view>
				<view><text>*</text>手机验证码</view>
				<view class="t3 t4"> <input   type="number" v-model="dataForm.code" maxlength="6" placeholder="请输入手机验证码"
						:placeholder-style='placeholderStyle'>
					<view class="codeBtn" @tap="getCode">{{tips}}</view>
				</view>
			</view>

			<view class="agree" @click="activeCheck =!activeCheck">
				<image :src="activeCheck?imgUrl+'10.png':imgUrl+'9.png'" mode="aspectFill"></image>
				我阅读并同意 <text>《阅读协议》</text>
			</view>
			<view class="btn" @click="register">
				注册并登录
			</view>

		</view>

		<view class="t2" v-if="dataForm.userType==2">

			<view>
				<view><text>*</text>登录账号(账号长度6-20位,支持数字和字母）</view>
				<view class="t3"> <input   type="text" v-model="dataForm.username" placeholder="请输入登录账号"
						:placeholder-style='placeholderStyle' maxlength="20"></view>
			</view>
			<view>
				<view><text>*</text>登录密码(长度6-20位,包含大小写字母、数字）</view>
				<view class="t3"> <input   type="password" v-model="dataForm.password" placeholder="请输入登录密码"
						:placeholder-style='placeholderStyle' maxlength="20"></view>
			</view>
			<view>
				<view><text>*</text>姓名</view>
				<view class="t3"> <input   type="text" v-model="dataForm.name" placeholder="请输入姓名"
						:placeholder-style='placeholderStyle'>
				</view>
			</view>
			<view>
				<view><text>*</text>身份证号码</view>
				<view class="t3"> <input   type="text" v-model="dataForm.certNo" placeholder="请输入身份证号码"
						:placeholder-style='placeholderStyle'>
				</view>
			</view>
			<view>
				<view><text>*</text>联系人</view>
				<view class="t3"> <input   type="text" v-model="dataForm.contact" placeholder="请输入联系人"
						:placeholder-style='placeholderStyle'>
				</view>
			</view>
			<view>
				<view><text>*</text>联系电话</view>
				<view class="t3"> <input   type="number" v-model="dataForm.mobile" placeholder="请输入联系电话"
						:placeholder-style='placeholderStyle'>
				</view>
			</view>
			<view>
				<view><text>*</text>手机验证码</view>
				<view class="t3 t4"> <input   type="number" v-model="dataForm.code" maxlength="6" placeholder="请输入手机验证码"
						:placeholder-style='placeholderStyle'>
					<view class="codeBtn" @tap="getCode">{{tips}}</view>
				</view>
			</view>

			<view class="agree" @click="activeCheck =!activeCheck">
				<image :src="activeCheck?imgUrl+'10.png':imgUrl+'9.png'" mode="aspectFill"></image>
				我阅读并同意 <text>《阅读协议》</text>
			</view>
			<view class="btn" @click="register">
				注册并登录
			</view>

		</view>

		<view class="t2" v-if="dataForm.userType==3 || dataForm.userType==4">

			<view>
				<view><text>*</text>登录账号(账号长度6-20位,支持数字和字母）</view>
				<view class="t3"> <input   type="text" v-model="dataForm.username" placeholder="请输入登录账号"
						:placeholder-style='placeholderStyle' maxlength="20"></view>
			</view>
			<view>
				<view><text>*</text>登录密码(长度6-20位,包含大小写字母、数字）</view>
				<view class="t3"> <input   type="password" v-model="dataForm.password" placeholder="请输入登录密码"
						:placeholder-style='placeholderStyle' maxlength="20"></view>
			</view>
			<view>
				<view><text>*</text>姓名</view>
				<view class="t3"> <input   type="text" v-model="dataForm.name" placeholder="请输入姓名"
						:placeholder-style='placeholderStyle'>
				</view>
			</view>


			<view>
				<view><text>*</text>联系电话</view>
				<view class="t3"> <input   type="number" v-model="dataForm.mobile" placeholder="请输入联系电话"
						:placeholder-style='placeholderStyle'>
				</view>
			</view>
			<view>
				<view><text>*</text>手机验证码</view>
				<view class="t3 t4"> <input   type="number" v-model="dataForm.code" maxlength="6" placeholder="请输入手机验证码"
						:placeholder-style='placeholderStyle'>
					<view class="codeBtn" @tap="getCode">{{tips}}</view>
				</view>
			</view>

			<view class="agree" @click="activeCheck =!activeCheck">
				<image :src="activeCheck?imgUrl+'10.png':imgUrl+'9.png'" mode="aspectFill"></image>
				我阅读并同意 <text>《阅读协议》</text>
			</view>
			<view class="btn" @click="register">
				注册并登录
			</view>

		</view>


		<u-code :seconds="seconds" ref="uCode" @change="codeChange"></u-code>
		<u-picker :show="show" :columns="columns" keyName="label" @close="show=false" :closeOnClickOverlay="true"
			@cancel="show=false" @confirm="confirmFn"></u-picker>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				type: '',
				show: false,
				typeName: '采集员',
				columns: [
					[

						{
							label: '采集员',
							// 其他属性值
							id: 1
							// ...
						}, {
							label: '管理员',
							id: 4
						}

					]
				],
				dataForm: {
					"certNo": "",
					"contact": "",
					"legalRepresentative": "",
					"mobile": "",
					"name": "",
					"password": "",
					"socialCreditCode": "",
					"unitName": "",
					"userType": 1,
					"username": "",
					"code": ""
				},
				tips: '获取验证码',
				// refCode: null,
				seconds: 60,
				activeCheck: true,
				imgUrl: this.imgUrl,
				placeholderStyle: 'font-size: 32upx;color: #999999;'

			}
		},
		computed: {

		},
		onShow() {


		},
		onLoad(e) {
			if (e.type == 4) {
				this.dataForm.userType = 4
				this.typeName = '管理员'
			}

		},
		methods: {
			confirmFn(e) {
				this.typeName = e.value[0].label
				this.dataForm.userType = e.value[0].id
				this.show = false
			},
			register() {
				var self = this;
				if (!this.activeCheck) {
					return
				}
				this.$http
					.register(this.dataForm)
					.then(res => {

						if (res.code == 0) {
							uni.showToast({
								title: '注册成功',
								icon: 'none'
							});
							uni.setStorageSync('token', res.data.token)

							setTimeout(function() {
								self.goToTab('/pages/home/index')
							}, 1500)

						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}

					})

			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				uni.showLoading({
					title: '正在获取验证码'
				})
				this.$http
					.apicode({
						mobile: this.dataForm.mobile
					})
					.then(res => {
						if (res.code == 0) {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();

						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}

					})



			},

		}
	}
</script>



<style lang="scss" scoped>
	.reg {
		padding-bottom: 2upx;
		padding-top: 30upx;
	}

	.t1 {
		display: flex;
		justify-content: space-around;
		padding: 0 34upx 34upx;

		>view {
			display: flex;
			align-items: center;
		}

		image {
			width: 32upx;
			height: 32upx;
			margin-right: 10upx;
		}
	}

	.t2 {
		padding: 0 24upx;
		font-size: 28upx;

		text {
			color: #D43030;
		}

		>view {
			margin-bottom: 24upx;

			image {
				margin-right: 20upx;
				width: 36upx;
				margin-top: 8upx;
				height: 30upx;
			}

			>view {
				margin-bottom: 24upx;
			}

			.t3 {
				background: #fff;
				width: 100%;
				height: 100upx;
				border-radius: 16upx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;

				input {
					width: 100%;
					height: 100%;
					margin-left: 24upx;
				}

				.codeBtn {
					color: #3875f6;
					font-size: 32upx;
					word-wrap: break-word;
					margin-right: 24upx;
				}
			}

			.t4 {
				input {
					width: 50%;
				}
			}


		}

		.agree {
			display: flex;
			align-items: center;
			justify-content: center;
			color: #999999;
			font-size: 28upx;

			image {
				width: 32upx;
				height: 32upx;
				margin-right: 12upx;
			}

			text {
				color: #3875F6;
			}

		}

		.btn {
			width: 100%;
			height: 90upx;
			text-align: center;
			color: #ffffff;
			font-size: 32upx;
			line-height: 90upx;
			border-radius: 8px;
			background: #3875f6;
			margin: 48upx auto;
		}




	}
</style>
